//绘制圆仓
var dataArray = [
    [[21.4, 2], [23.6, 2], [23.8, 2], [20.2, 2], [20.2, 2], [23.4, 2], [23.2, 2], [17.6, 2], [20.2, 2], [23.2, 2], [16.3, 2], [23.4, 2], [22.8, 2], [23, 2], [23.5, 2], [22.8, 2], [22.9, 2], [22.8, 2], [25, 2], [23.5, 2], [23.4, 2], [23.3, 2], [23.1, 2], [22.5, 2], [23.1, 2]],
    [[22.3, 2], [23.7, 2], [23.5, 2], [23.3, 2], [18.9, 2], [23.5, 2], [23.2, 2], [22.8, 2], [23.2, 2], [23.3, 2], [23.5, 2], [23.4, 2], [22.7, 2], [23.4, 2], [22.6, 2], [22.2, 2], [22.3, 2], [22, 2], [23.7, 2], [21.3, 2], [20, 2], [23.9, 2], [23.3, 2], [22.1, 2], [23.5, 2]],
    [[23.3, 2], [23.5, 2], [22.7, 2], [22.8, 2], [23.1, 2], [22.6, 2], [21.9, 2], [20.8, 2], [23.2, 2], [22.3, 2], [21.1, 2], [23.2, 2], [23.6, 2], [22.2, 2], [23.5, 2], [23.7, 2], [23.1, 2], [23.4, 2], [23.2, 2], [23.2, 2], [23.4, 2], [23, 2], [22.8, 2], [22.5, 2], [23.3, 2]],
    [[22.5, 2], [23.3, 2], [21.9, 2], [21.4, 2], [23.5, 2], [23.6, 2], [23.6, 2], [23.4, 2], [23.1, 2], [23.4, 2], [23.4, 2], [23.5, 2], [23, 2], [23, 2], [22.9, 2], [23.1, 2], [19.4, 2], [22, 2], [22.1, 2], [21.4, 2], [23.8, 2], [23, 2], [23.4, 2], [19.8, 2], [22.9, 2]]
];
var paper;
function draw(t) {
    document.getElementById('my-canvas').innerHTML = ' ';
    if (dataArray.length <= 0) return;
    var cycles = 3;//圈数
    var n1 = 1, n2 = 8, n3 = 16;//每圈的分布个数
    var num = n1 + n2 + n3;//每层的总数量
    paper = Raphael("my-canvas", 800, 400);//画板
    var _yy = 20 * t;//y轴坐标的增量
    paper.ellipse(420, 80 + (t * 20), 360, 60).attr('fill', '#BCE3F5');
    paper.ellipse(420, 335, 360, 60).attr({//圆仓的底子
        gradient: '90-#848388-#fff',
        "fill-opacity": "0.1",
        "stroke": "#CDCDCB",
        'stroke-width': 2,
        'stroke-linejoin': 'round'
    });
    var coorArray = [//初始化坐标点
        [[420, 80 + _yy]],//椭圆起始点
        [[570, 80 + _yy], [520, 60 + _yy], [420, 55 + _yy], [320, 60 + _yy], [270, 80 + _yy], [320, 100 + _yy], [420, 105 + _yy], [520, 100 + _yy]],
        [[700, 80 + _yy], [660, 60 + _yy], [600, 50 + _yy], [530, 40 + _yy], [420, 35 + _yy], [310, 40 + _yy], [240, 50 + _yy], [180, 60 + _yy],
            [140, 80 + _yy], [180, 100 + _yy], [240, 110 + _yy], [310, 120 + _yy], [420, 125 + _yy], [530, 120 + _yy], [600, 110 + _yy], [660, 100 + _yy]]
    ];
    var arr = coorArray.slice(0);
    var arr1 = arr[0];
    var arr2 = arr[1];
    var arr3 = arr[2];
    var st = paper.ellipse(420, 80 + _yy, 360, 60).attr('fill', '#ddd');
    //下方移动椭圆和最底层椭圆中间区域
    var parms_b = '';
    switch (t) {
        case 0:
            parms_b = 'M60,80A360,60 0 1 0 780 80 L780,335A360,60 0 1 0 60 335Z';
            break;
        case 1:
            parms_b = 'M60,100A360,60 0 1 0 780 100 L780,335A360,60 0 1 0 60 335Z';
            break;
        case 2:
            parms_b = 'M60,120A360,60 0 1 0 780 120 L780,335A360,60 0 1 0 60 335Z';
            break;
        case 3:
            parms_b = 'M60,140A360,60 0 1 0 780 140 L780,335A360,60 0 1 0 60 335Z';
            break;
    }
    //下方移动椭圆和最底层椭圆的中间区域部分
    var bgpaper_bottom = paper.path(parms_b);//绘制路径
    bgpaper_bottom.attr({ "fill": '#DEDFE1',
        "fill-opacity": "1", "stroke": "#C3C8CB", 'stroke-width': 2, 'stroke-linejoin': 'round'});
    //上方移动椭圆和最顶层椭圆的中间区域部分
    var parms_t = '';
    switch (t) {
        case 0:
            parms_t = 'M60,65A360,60 0 1 1 780 65 L780,80A360,60 0 1 0 60 80Z';
            break;
        case 1:
            parms_t = 'M60,65A360,60 0 1 1 780 65 L780,100A360,60 0 1 0 60 100Z';
            break;
        case 2:
            parms_t = 'M60,65A360,60 0 1 1 780 65 L780,120A360,60 0 1 0 60 120Z';
            break;
        case 3:
            parms_t = 'M60,65A360,60 0 1 1 780 65 L780,140A360,60 0 1 0 60 140Z';
            break;
    }
    var bgpaper_t = paper.path(parms_t);
    bgpaper_t.attr({"fill": "#DEDFE1", "stroke": "#C3C8CB", 'stroke-width': 2, 'stroke-linejoin': 'round'});
    var raphaelSet = paper.set();
    raphaelSet.push(st);
    st.attr({"fill": "#CAB17B", "fill-opacity": "0", "stroke": "#FFF", "stroke-opacity": "0", "cursor": "pointer"})
        .mouseout(function (event) {//墙的属性
            this.animate({"fill-opacity": "0", "stroke-opacity": "0"}, 1000); //鼠标移出事件
        }).mouseover(function (event) {
            this.animate({"fill-opacity": "1", "stroke-opacity": "0"}, 1000);//鼠标移入事件
        });
    //里圈的坐标点
    var _x1 = arr1[0][0];
    var _y1 = arr1[0][1];
    //绘制里圈的矩形和数据
    var cir1 = paper.rect(_x1, _y1, 30, 13).attr({//里圈
        "fill": '#03FA3B',
        "stroke": "#15876D"
    });
    paper.text(_x1 + 13, _y1 + 7, dataArray[t][0][0])
        .attr({"stroke": "#000", "font": "11px 宋体, Arial"}); //绘制数据
    //绘制中间圈的矩形和数据
    for (var i = 0; i < arr2.length; i++) {
        var _x2 = arr2[i][0];
        var _y2 = arr2[i][1];
        var cir2 = paper.rect(_x2, _y2, 30, 13).attr({//中间圈
            "fill": '#FFFF87',
            "stroke": "#15876D"
        });
        var dataArray1 = dataArray[t].slice(1, 9);
        //console.log(dataArray1[i][0]);
        paper.text(_x2 + 13, _y2 + 7, dataArray1[i][0])
            .attr({"stroke": "#000", "font": "11px 宋体, Arial"}); //绘制数据
    }
    //绘制外圈的矩形和数据
    for (var c = 0; c < arr3.length; c++) {
        var _x3 = arr3[c][0];
        var _y3 = arr3[c][1];
        var cir3 = paper.rect(_x3, _y3, 30, 13).attr({//外圈
            "fill": '#03FA3B',
            "stroke": "#15876D"
        });
        var dataArray2 = dataArray[t].slice(9);
        paper.text(_x3 + 13, _y3 + 7, dataArray2[c][0])
            .attr({"stroke": "#000", "font": "11px 宋体, Arial"}); //绘制数据
    }
    var L = dataArray.length;//层数
    var _y = 80;//第一层y轴的起始坐标点
    var h = 20;//层高
    for (var i = 0; i < L; i++) {
        paper.text(30, _y + h * i, "第" + (i + 1) + "层")
            .attr({"stroke": "#000", "font": "12px 宋体, Arial", "cursor": "pointer"})
            .click(function (e) {
                var a = e.target.textContent.substring(1, 2);
                draw(a - 1);
            });
    }
}
//条形进度条
(function ($) {
    'use strict';
    $.fn.LineProgressbar = function (options) {
        var options = $.extend({
            percentage: null,
            ShowProgressCount: true,
            duration: 1000,
            // Styling Options
            fillBackgroundColor: '#797878',
            backgroundColor: '#fff',
            radius: '0px',
            height: '15px',
            width: '180px'
        }, options);

        return this.each(function (index, el) {
            // Markup
            $(el).html('<div class="percentCount"></div><div class="progressbar"><div class="proggress"></div></div>');
            var progressFill = $(el).find('.proggress');
            var progressBar = $(el).find('.progressbar');
            progressFill.css({
                backgroundColor: options.fillBackgroundColor,
                height: options.height,
                borderRadius: options.radius
            });
            progressBar.css({
                width: options.width,
                backgroundColor: options.backgroundColor,
                borderRadius: options.radius
            });
            // Progressing
            progressFill.animate(
                {
                    width: options.percentage + "%"
                },
                {
                    step: function (x) {
                        if (options.ShowProgressCount) {
                            $(el).find(".percentCount").text(Math.round(x) + "℃");
                        }
                    },
                    duration: options.duration
                }
            );
        });
    }
})(jQuery);
